import { useEffect, useState } from "react";
import { useParams, useNavigate } from "react-router-dom";
import { NavBar, Collapse, Tag, Card, Button, Input, Toast } from "antd-mobile";
import http from "../../utils/http";
import MyTickInfo from "../../components/MyTickInfo";
import MyNavDate from "../../components/MyNavDate";
import { useSelector } from "react-redux";
import styles from "./index.module.css";

const Index = () => {
  const naigate = useNavigate();
  const { id } = useParams();
  //获取仓库的日期
  const { date } = useSelector((state) => state.CitySlice);
  const [DetailItem, setDetailItem] = useState({});
  //评论的内容
  const [value, setValue] = useState("");
  //评论的列表
  const [comList, setComList] = useState([]);

  const userInfo = JSON.parse(localStorage.getItem("userInfo"));

  const getDetail = async () => {
    const res = await http.get("/api/trip/train/detail", { params: { id } });
    const { code, data } = res.data;
    if (code === 200) {
      setDetailItem(data);
    }
  };

  useEffect(() => {
    getDetail();
  }, []);

  if (!DetailItem.id) {
    return <div>加载中...</div>;
  }

  //模拟座次信息
  const tickList = ["商务座", "一等座", "二等座"];
  //模拟票价信息
  const tickPrices = [
    DetailItem.tick.vip,
    DetailItem.tick.firstTick,
    DetailItem.tick.secondTick,
  ];
  
  const handelSubLis = () => {
    if (value === "") return Toast.show("请输入内容");

    setComList([...comList, value]);
    setValue("");
  };

  const handelToOrder = (price, levelseat) => {
    naigate(`/order?price=${price}&levelseat=${levelseat}`, {
      state: DetailItem,
    });
  };

  return (
    <div>
      <NavBar onBack={() => naigate("/")}>车次详情</NavBar>
      {/* 日期选择 */}
      <MyNavDate date={date}></MyNavDate>
      {/* 调用车次详情信息 */}
      <MyTickInfo data={DetailItem}></MyTickInfo>
      {/* 座次信息 */}
      <div>
        <Collapse arrowIcon={() => <Tag color="warning">购票</Tag>}>
          {tickList.map((item, ind) => (
            <Collapse.Panel
              key={ind}
              title={
                <p>
                  {item}{" "}
                  <span style={{ marginLeft: 15 }}>¥{tickPrices[ind]}</span>
                </p>
              }
              onClick={() => handelToOrder(tickPrices[ind], item)}
            ></Collapse.Panel>
          ))}
        </Collapse>
      </div>
      {/* 评论功能 */}
      <div>
        <Card title="用户评价">
          <div className={styles.com_wrap}>
            <Input
              placeholder="请输入内容"
              value={value}
              onChange={(val) => {
                setValue(val);
              }}
            />
            <Button
              className={styles.cbtn}
              onClick={() => handelSubLis()}
              size="mini"
            >
              提交
            </Button>
          </div>
          <div className={styles.com_list}>
            {comList.map((item, ind) => (
              <dl key={ind}>
                <dt>
                  <img src={userInfo.avatar} alt="" />
                </dt>
                <dd>{item}</dd>
              </dl>
            ))}
          </div>
        </Card>
      </div>
    </div>
  );
};

export default Index;
